
<script setup>
 const onClickLeft = () => history.back();
</script>
<template>
  <van-nav-bar
    :fixed="true"
    :placeholder="true"
    title="退款详情"
    left-arrow
    @click-left="onClickLeft"
  />
  <div class="sysj">
    <van-icon name="clock-o" /><span>退款成功</span>
    <div>2022-09-02 12:20:53</div>
  </div>
  <div class="box">
    <div class="xqbt">退款总金额 <span>￥2340/10课时</span></div>
    <div class="juan">
      <span>退回支付宝账号(13212316)</span><span>-￥15.8</span>
    </div>
    <van-steps direction="vertical" :active="4">
      <van-step>
        <h3>提交申请</h3>
        <p>2016-07-12 12:40</p>
      </van-step>
      <van-step>
        <h3>审核申请</h3>
        <p>2016-07-11 10:00</p>
      </van-step>
      <van-step>
        <h3>进行退款</h3>
        <p>2016-07-10 09:30</p>
      </van-step>
      <van-step>
        <h3>处理完成</h3>
        <p>2016-07-10 09:30</p>
      </van-step>
    </van-steps>
    <div>
      
      <div class="juan">
        <span>二年级数学志高秋季班(下)</span><span>￥2340/10课时</span>
      </div>
      <div class="xqbt">实付<span>￥2340</span></div>
      <h5>服务单号：123456</h5>
      <h5>申请时间：2022-9-12 10：53：02</h5>
      <h5>申请账号：阿松大</h5>
      <h5>联系人：阿松大</h5>
      <h5>联系方式：151515155</h5>
      <h5>退款原因：首次举办的举报</h5>
      <h5>问题描述：基础比较</h5>
      <h5>审核留言：十九场比赛</h5>
    </div>
  </div>
</template>


<style  scoped>
.juan {
  padding-top: 10px;
  display: flex;
  justify-content: space-between;
}
.juan span:last-child {
  color: #ee0a24;
}
.box {
  padding: 10px;
}
.xqbt {
  padding-top: 10px;
}
.xqbt > span {
  font-weight: 700;
  color: #ff0000;
  font-size: 13px;
  margin-left: 50px;
}
.sysj > div {
  padding: 5px 0 0 15px;
}
.sysj {
  color: wheat;
  margin-top: 5px;
  padding: 20px 10px;
  background-color: aqua;
}
</style>